Tutorial 5: Shadow Compositing

Gaffer adds a great new tool to your LightWave arsenal called the "Luminous Shadow Darkening Tool." If you've read the manual (and you should) it goes through great detail on the how traditional composition shots are done and how Gaffer simplifies the entire process into a single step. In this tutorial, though, we're going to look at an alternative use for it: making web page graphics.

The effect we're trying to make is used even on the Worley Labs website. It's a drop shadow applied to some 3D extruded text. One way of doing this is to render the gadget, then use a paint program like Photoshop to make a mask, blur it, and darken the background with it. However, it'd be cool to do this all in one step in LightWave, and it would also be cool to have more accurate shadows than a simple 2D offset and blur will give us.

The Luminous Shadow Darkening tool can actually do this for us. The problem is that we want to match our background to the web page exactly, and it would be hard in LightWave to choose the exact surface color and light intensities to match this shade. Even a small error in the background color will look strange, like a ghost rectangle was surrounding the web graphic. However, the LSD tool is designed exactly for this kind of matching, where you know the color of your "fully lit" areas and just want to darken those areas based on the shadows.

Load "comp_webex.lws" into Layout and render a frame to see our starting point, a simple extruded logo. We want to render an image which has the same background color as our web page, but with shadows falling onto that background. The first thing to do is to determine the background color we are going to use for the web page. This could be any shade, but for our web site, it's a light grey, 208-208-208. We want to match this shade on our background plane in the 3D scene, so so set the "flat" surface to this color.

Next, we want to have a fairly "flat" view of the logo. With the camera up close, we get odd perspective effects, so we want to move the camera farther from the logo, but zoom back in to make it fill the screen. Set the camera zoom to 10 and move the camera back into the -Z axis to about -15.8 and keyframe the position. Drag out a limited region box that fits the width of the frame and fits just inside the height of the background object. You don't want any of the black background showing in this limited region, but we do want to capture the background in the rendered frame, for the shadows to fall onto.

If we rendered now, we'd get the wrong shade for the background plane, and the shadows wouldn't have that soft edge we wanted. Add Gaffer onto the "flat" surface. We'll first make the shadows softer, using Gaffer's area lights. Under "Area Light Shadows", the only light in our scene is listed in the "Other" row (see the "1" showing the number of lights to the right?). Set the quality setting to 10% and the radius radius to 5. If we rendered now, we'd see the soft shadows, but our background would still be the wrong shade.

We'll make the background "lock" to the right color with Gaffer's compositing tool. Activate the "Luminous Shadow Darkening Tool" by selecting "Use" in the its section. The default settings should suit our purpose, but if you wanted tinted shadows, you could tweak the color as well. Render a frame.

The image now works great! The unshadowed parts of the background are the shade we want! The LSD tool often works extremely well even with the defaults, and its settings don't need much tweaking.

The problem is that the shadow quality could be set a bit higher. But actually, we don't need to change them in this case, since we're not antialiasing at all for this test. When we turn on antialiasing, the shadow quality will go up enormously. In this case, choose Medium antialiasing and render a frame, saving the image. The resolution of the final image is still very high, so we'll be reducing the size in a paint program, which will also help increase the shadow quality.

Import the saved frame into your favorite paint program (probably PhotoShop!). Select just the logo and light grey background and crop the image. Use the color picker tool (your paint program does have one, right?) and test the color of the background, where no shadows fall. This should read as 208-208-208. This is the exact color we dialed into LightWave; the exact color we want as our background shade.

We rendered the logo at a large size, but we want to scale it down to make the final image ready for the web page. Let's resize the image to a height of 71 and constrain the width's proportions to keep the image shape the same. From here there are two usual methods of saving the image to use on the web, either as a transparent.gif, or as a simple jpg. Both have their merits, but different browsers treat them differently, so the choice is up to you. (If you thought this tutorial was all about HTML design, think again!) Save the image as "webex.gif". There's a blank HTML document included in the tutorial files, ready to test the image you made. Load it in a browser and see how you did!